<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
		/>
		<meta name="format-detection" content="telephone=no" />
		<meta name="format-detection" content="email=no" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title></title>
		<!-- 引入 vant UI 组件库样式文件 -->
		<link rel="stylesheet" href="../common/css/vant-index.css" />
		<link rel="stylesheet" href="../common/css/common.css" />
		<link rel="stylesheet" href="css/doctor.css" />
		<style type="text/css">
			html {
				height: 100%;
			}
			.van-tabs__nav {
				background: none;
			}
			.van-tab {
				font-size: 18px;
			}
			.van-tabs__line {
				background: #e22e30;
			}
			.div {
				margin-bottom: 3px;
			}
			.van-tabs__track {
				border-radius: 8px;
			}
			.mpl_item_right .div:last-of-type {
				margin-bottom: 0;
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<div class="id_container">
				<van-tabs v-model:active="active" @click="onClick" :swipeable="true">
					<van-tab
						v-for="(item1,index) in tab"
						:key="index"
						:title="item1.packageName"
					>
						<!--<van-pull-refresh v-model="refreshing" @refresh="onRefresh">-->
						<van-list
							class="list_box_100 doctor_box"
							v-if="nothing==1"
							v-model="loading"
							:finished="finished"
							:style="listsyle"
							@load="onLoad"
						>
							<div
								class="mpl_item"
								v-for="item in detail"
								@click="linkToPatient(item.patientId)"
							>
								<div class="mpl_item_left">
									<img v-if="!item.patientsImg" src="img/logo.png" />
									<img v-if="item.patientsImg" :src="item.patientsImg" />
								</div>
								<div class="mpl_item_right">
									<div
										class="flex flex-align-center"
										style="margin-bottom: 5px"
									>
										<span class="fontsize16" v-if="item.patientsName.length>6"
											>{{item.patientsName.substring(0,6)}}...</span
										>
										<span class="fontsize16" v-if="item.patientsName.length<=6"
											>{{item.patientsName}}</span
										>
										<span class="colora1" style="margin: 0 10px"
											>{{item.patientsAge}}岁</span
										>
										<div>
											<img v-if="item.patientsSex==1" src="img/man.png" />
											<img v-if="item.patientsSex==2" src="img/woman.png" />
										</div>
									</div>
									<div class="flex flex-align-center">
										<span class="colora1">起始时间：</span>
										<span
											>{{item.startTime.replaceAll('-',
											'/')}}-{{item.endTime.replaceAll('-', '/')}}</span
										>
									</div>
									<div class="flex flex-align-center">
										<span class="colora1">糖尿病类型：</span>
										<span>{{item.patientsDiabetisTypeName}}</span>
									</div>
									<div class="flex flex-align-center">
										<span class="colora1">确诊日期：</span>
										<span>{{item.patientsConfirmedDate}}</span>
									</div>
									<div>
										<span class="colora1">简要病史：</span>
										<span>{{item.patientsDescription}}</span>
									</div>
								</div>
								<div class="doctor_tag">
									责任医师：<span class="doctor_tag_name"
										>{{item.doctorName}}</span
									>
								</div>
							</div>
						</van-list>
						<van-empty
							v-if="nothing==2"
							class="custom-image"
							style="margin-top: 200px"
							image="img/blank_pic.png"
							description="暂无患者"
						/>
					</van-tab>
					<!--</van-pull-refresh>-->
				</van-tabs>
			</div>
			<div
				v-if="nothing==1"
				style="
					margin-bottom: 25px;
					color: #a1a1a1;
					text-align: center;
					font-size: 16px;
				"
			>
				当前页共{{detail.length}}名
			</div>

			<link-index></link-index>
		</div>
	</body>
	<!-- 引入 rem -->
	<script src="../common/js/rem.js"></script>
	<!-- 上线环境用 -->
	<script src="../common/js/vue.global.prod.js"></script>
	<!-- 引入 UI 组件库 -->
	<script src="../common/js/vant.min.js"></script>
	<!-- axios 接口调用 -->
	<script src="../common/js/axios.min.js"></script>
	<script src="../base.js"></script>
	<script src="../common/js/url.min.js"></script>

	<script type="module">
		import {
			getAction,
			postAction,
			spliceUrl,
		} from '../common/js/api/vue3-axios-utils.js'

		import { linkIndex } from '../common/js/template/linkIndex.js'

		const PatientData = {
			data() {
				return {
					url: {
						getManageDetail: '/doctor/patient/group/list',
						getServiceDetail: '/doctor/patient/package/list',
					},
					tab: [],
					doctorId: '',
					detail: [],
					active: '',
					nothing: 2,
					page: 1,
					pageSize: 10,
					groupId: 0,
					total_page: 0,
					finished: false,
					loading: false,
					refreshing: false,
					listsyle: {
						width: '',
					},
				}
			},
			watch: {
				active() {
					this.detail = []
					this.page = 1
					this.loading = false
					this.finished = false
					this.handleGetManageDetail()
				},
			},
			created() {
				this.doctorId = url('?id')
				this.listsyle.width = document.body.clientWidth * 0.94 + 'px'
				this.init()
			},
			methods: {
				async init() {
					await this.getTab()
				},
				getTab() {
					getAction(spliceUrl('/107/03/1070309')).then(res => {
						res = res.data
						if (res.success) {
							this.tab = res.result
							this.active = 0
							console.log(this.tab)
							this.handleGetManageDetail()
						} else {
							console.log(res.message)
						}
					})
				},
				handleGetManageDetail() {
					postAction(spliceUrl('/doctor/service'), {
						doctorId: this.doctorId,
						packageId: this.tab[this.active].dataId,
					}).then(res => {
						res = res.data
						console.log('handleGetManageDetail', res)
						if (res.success) {
							document.title = '体验包服务'
							if (res.result.length > 0) {
								this.nothing = 1
								this.detail = res.result
								console.log('detail', this.detail)
							} else {
								if (this.page == 1) {
									this.nothing = 2
									this.detail = []
								}
							}
						} else {
							console.log(res.message)
						}
					})
				},
				// handleGetServiceDetail(){
				// 	getAction(spliceUrl(this.url.getServiceDetail),{doctorId:this.doctorId,status:this.groupId,page:this.page,pageSize:this.pageSize}).then((res) => {
				// 		res = res.data
				// 		console.log('handleGetServiceDetail',res)
				// 		document.title = '体验包服务'

				// 		if(res.success){
				// 			if(res.result.count){
				// 				this.nothing = 1
				// 				this.total_page=res.result.totalPage
				// 				this.total = res.result.count
				// 				for(var i=0;i<res.result.recordList.length;i++){
				// 					this.detail.push(res.result.recordList[i])
				// 				}
				// 			}else{
				// 				if(this.page==1){
				// 					this.nothing = 2
				// 					this.detail = []
				// 				}
				// 			}
				// 		}else{
				// 			if(this.page==1){
				// 				this.nothing = 2
				// 				this.detail = []
				// 			}
				// 		}
				// 	})
				// },
				onClick(index) {
					this.detail = []
					this.active = index
					this.page = 1
					this.loading = false
					this.finished = false
					this.handleGetManageDetail()
				},
				linkToPatient(id) {
					window.location.href = '../patient/index.html?userid=' + id
				},
				onLoad() {
					if (this.page < this.total_page) {
						this.page++
						this.handleGetManageDetail()
					}
					this.loading = false
					this.finished = true
					// if(this.detail.length>=this.total){
					// 	this.finished = true
					// }
				},
			},
			components: {
				linkIndex: linkIndex,
			},
		}

		const app = Vue.createApp(PatientData)

		app.use(vant)

		// 通过 CDN 引入时不会自动注册 Lazyload 组件
		// 可以通过下面的方式手动注册
		app.use(vant.Lazyload)

		// 调用函数组件，弹出一个 Toast
		// vant.Toast("刷新成功");

		app.mount('#app')
	</script>
</html>
